<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sparkle 960 CSS System</title>
<link href="style/grid_compressed.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">
body {
	background: #123;
	border-top: 5px solid #000;
	color: #333;
	font-size: 11px;
	padding: 20px 0 40px;
}
a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: center;
}
h2 {
	padding: 20px 0 0;
	text-align: center;
}
p {
	border: 1px solid #666;
	overflow: hidden;
	padding: 10px 0;
	text-align: center;
}
h3 {
	margin:0 auto;
	width:320px;
	text-align:right;
	font-size:1.2em;
}
h3 a {
	color:#360;
	text-decoration:underline
}
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul{margin-bottom:20px}
</style>
</head>
<body>
<h1> <a href="http://www.qianduan.net/">Sparkle 960 CSS System</a> </h1>
<h3><a href="http://www.960.gs" target="_blank">960 Home</a> | <a href="http://code.google.com/p/sparkle960/">Project Home</a> | <a href="http://code.google.com/p/sparkle960/downloads/list" target="_blank">Download Sources</a></h3>
<div class="container c12">
	<h2>12 Column Grid</h2>
	<div class="column c_all">
		<p>940px</p>
	</div>
	<!--end .column.c_all-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1">
		<p>60px</p>
	</div>
	<!--end .column.c12_1-->
	<div class="column c12_11">
		<p>860px</p>
	</div>
	<!--end .column.c12_11-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_2">
		<p>140px</p>
	</div>
	<!--end .column.c12_2-->
	<div class="column c12_10">
		<p>780px</p>
	</div>
	<!--end .column.c12_10-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_3">
		<p>220px</p>
	</div>
	<!--end .column.c12_3-->
	<div class="column c12_9">
		<p>700px</p>
	</div>
	<!--end .column.c12_9-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_4">
		<p>300px</p>
	</div>
	<!--end .column.c12_4-->
	<div class="column c12_8">
		<p>620px</p>
	</div>
	<!--end .column.c12_8-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_5">
		<p>380px</p>
	</div>
	<!--end .column.c12_5-->
	<div class="column c12_7">
		<p>540px</p>
	</div>
	<!--end .column.c12_7-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_6">
		<p>460px</p>
	</div>
	<!--end .column.c12_6-->
	<div class="column c12_6">
		<p>460px</p>
	</div>
	<!--end .column.c12_6-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 suffix12_11">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.suffix12_11-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_1 suffix12_10">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_1.suffix12_10-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_2 suffix12_9">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_2.suffix12_9-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_3 suffix12_8">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_3.suffix12_8-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_4 suffix12_7">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_4.suffix12_7-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_5 suffix12_6">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_5.suffix12_6-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_6 suffix12_5">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_6.suffix12_5-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_7 suffix12_4">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_7.suffix12_4-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_8 suffix12_3">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_8.suffix12_3-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_9 suffix12_2">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_9.suffix12_2-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_10 suffix12_1">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_10.suffix12_1-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_1 prefix12_11">
		<p>60px</p>
	</div>
	<!--end .column.c12_1.prefix12_11-->
	<div class="clear">&nbsp;</div>
	<div class="column c12_6">
		<div class="column c12_1 alpha">
			<p>60px</p>
		</div>
		<!--end .column.c12_6.alpha-->
		<div class="column c12_5 omega">
			<p>380px</p>
		</div>
		<!--end .column.c12_5.omega-->
		<div class="clear">&nbsp;</div>
		<div class="column c12_3 alpha">
			<p>220px</p>
		</div>
		<!--end .column.c12_3.alpha-->
		<div class="column c12_3 omega">
			<p>220px</p>
		</div>
		<!--end .column.c12_3.omega-->
	</div>
	<!--end .column.c12_6-->
	<div class="column c12_6">
		<div class="column c12_3 alpha">
			<p>220px</p>
		</div>
		<!--end .column.c12_3.alpha-->
		<div class="column c12_3 omega">
			<p>220px</p>
		</div>
		<!--end .column.c12_3.omega-->
		<div class="clear">&nbsp;</div>
		<div class="column c12_1 alpha">
			<p>60px</p>
		</div>
		<!--end .column.c12_1.alpha-->
		<div class="column c12_5 omega">
			<p>380px</p>
		</div>
		<!--end .column.c12_5.omega-->
	</div>
	<div class="clear">&nbsp;</div>
	<!--end .column.c12_6-->
</div>
<div class="clear">&nbsp;</div>
<!--end .container.c12_-->
<div class="container c16">
	<h2> 16 Column Grid </h2>
	<div class="clear">&nbsp;</div>
	<div class="column c_all">
		<p>940px</p>
	</div>
	<!--end .column.c16_all-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1">
		<p>40px</p>
	</div>
	<!--end .column.c16_1-->
	<div class="column c16_15">
		<p>880px</p>
	</div>
	<!--end .column.c16_15-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_2">
		<p>100px</p>
	</div>
	<!--end .column.c16_2-->
	<div class="column c16_14">
		<p>820px</p>
	</div>
	<!--end .column.c16_14-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_3">
		<p>160px</p>
	</div>
	<!--end .column.c16_3-->
	<div class="column c16_13">
		<p>760px</p>
	</div>
	<!--end .column.c16_13-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_4">
		<p>220px</p>
	</div>
	<!--end .column.c16_4-->
	<div class="column c16_12">
		<p>700px</p>
	</div>
	<!--end .column.c16_12-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_5">
		<p>280px</p>
	</div>
	<!--end .column.c16_5-->
	<div class="column c16_11">
		<p>640px</p>
	</div>
	<!--end .column.c16_11-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_6">
		<p>340px</p>
	</div>
	<!--end .column.c16_6-->
	<div class="column c16_10">
		<p>580px</p>
	</div>
	<!--end .column.c16_10-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_7">
		<p>400px</p>
	</div>
	<!--end .column.c16_7-->
	<div class="column c16_9">
		<p>520px</p>
	</div>
	<!--end .column.c16_9-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_8">
		<p>460px</p>
	</div>
	<!--end .column.c16_8-->
	<div class="column c16_8">
		<p>460px</p>
	</div>
	<!--end .column.c16_8-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 suffix16_15">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.suffix16_15-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_1 suffix16_14">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_1.suffix16_14-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_2 suffix16_13">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_2.suffix16_13-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_3 suffix16_12">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_3.suffix16_12-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_4 suffix16_11">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_4.suffix16_11-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_5 suffix16_10">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_5.suffix16_10-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_6 suffix16_9">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_6.suffix16_9-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_7 suffix16_8">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_7.suffix16_8-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_8 suffix16_7">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_8.suffix16_7-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_9 suffix16_6">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_9.suffix16_6-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_10 suffix16_5">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_10.suffix16_5-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_11 suffix16_4">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_11.suffix16_4-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_12 suffix16_3">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_12.suffix16_3-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_13 suffix16_2">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_13.suffix16_2-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_14 suffix16_1">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_14.suffix16_1-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_1 prefix16_15">
		<p>40px</p>
	</div>
	<!--end .column.c16_1.prefix16_15-->
	<div class="clear">&nbsp;</div>
	<div class="column c16_8">
		<div class="column c16_4 alpha">
			<p>220px</p>
		</div>
		<!--end .column.c16_4.alpha-->
		<div class="column c16_4 omega">
			<p>220px</p>
		</div>
		<!--end .column.c16_4.omega-->
		<div class="clear">&nbsp;</div>
		<div class="column c16_1 alpha">
			<p>40px</p>
		</div>
		<!--end .column.c16_1.alpha-->
		<div class="column c16_7 omega">
			<p>400px</p>
		</div>
		<!--end .column.c16_7.omega-->
	</div>
	<!--end .column.c16_8-->
	<div class="column c16_8">
		<div class="column c16_1 alpha">
			<p>40px</p>
		</div>
		<!--end .column.c16_1.alpha-->
		<div class="column c16_7 omega">
			<p>400px</p>
		</div>
		<!--end .column.c16_7.omega-->
		<div class="clear">&nbsp;</div>
		<div class="column c16_4 alpha">
			<p>220px</p>
		</div>
		<!--end .column.c16_4.alpha-->
		<div class="column c16_4 omega">
			<p>220px</p>
		</div>
		<!--end .column.c16_4.omega-->
	</div>
	<!--end .column.c16_8-->
	<div class="clear">&nbsp;</div>
</div>
<!--end .container.c16-->
<div class="container c24">
	<h2> 24 Column Grid </h2>
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_all">
		<p>950px</p>
	</div>
	<!--end .column2.c24_all-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1-->
	<div class="column2 c24_23">
		<p>910px</p>
	</div>
	<!--end .column2.c24_23-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_2">
		<p>70px</p>
	</div>
	<!--end .column2.c24_2-->
	<div class="column2 c24_22">
		<p>870px</p>
	</div>
	<!--end .column2.c24_22-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_3">
		<p>110px</p>
	</div>
	<!--end .column2.c24_3-->
	<div class="column2 c24_21">
		<p>830px</p>
	</div>
	<!--end .column2.c24_21-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_4">
		<p>150px</p>
	</div>
	<!--end .column2.c24_4-->
	<div class="column2 c24_20">
		<p>790px</p>
	</div>
	<!--end .column2.c24_20-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_5">
		<p>280px</p>
	</div>
	<!--end .column2.c24_5-->
	<div class="column2 c24_19">
		<p>750px</p>
	</div>
	<!--end .column2.c24_19-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_6">
		<p>230px</p>
	</div>
	<!--end .column2.c24_6-->
	<div class="column2 c24_18">
		<p>710px</p>
	</div>
	<!--end .column2.c24_18-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_7">
		<p>270px</p>
	</div>
	<!--end .column2.c24_7-->
	<div class="column2 c24_17">
		<p>670px</p>
	</div>
	<!--end .column2.c24_17-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_8">
		<p>310px</p>
	</div>
	<!--end .column2.c24_8-->
	<div class="column2 c24_16">
		<p>630px</p>
	</div>
	<!--end .column2.c24_16-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_9">
		<p>350px</p>
	</div>
	<!--end .column2.c24_9-->
	<div class="column2 c24_15">
		<p>590px</p>
	</div>
	<!--end .column2.c24_15-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_10">
		<p>390px</p>
	</div>
	<!--end .column2.c24_10-->
	<div class="column2 c24_14">
		<p>550px</p>
	</div>
	<!--end .column2.c24_14-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_11">
		<p>430px</p>
	</div>
	<!--end .column2.c24_11-->
	<div class="column2 c24_13">
		<p>510px</p>
	</div>
	<!--end .column2.c24_13-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_12">
		<p>470px</p>
	</div>
	<!--end .column2.c24_12-->
	<div class="column2 c24_12">
		<p>470px</p>
	</div>
	<!--end .column2.c24_12-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 suffix24_23">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.suffix24_23-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_1 suffix24_22">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_1.suffix24_22-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_2 suffix24_21">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_2.suffix24_21-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_3 suffix24_20">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_3.suffix24_20-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_4 suffix24_19">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_4.suffix24_19-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_5 suffix24_18">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_5.suffix24_18-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_6 suffix24_17">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_6.suffix24_17-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_7 suffix24_16">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_7.suffix24_16-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_8 suffix24_15">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_8.suffix24_15-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_9 suffix24_14">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_9.suffix24_14-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_10 suffix24_13">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_10.suffix24_13-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_11 suffix24_12">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_11.suffix24_12-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_12 suffix24_11">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_12.suffix24_11-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_13 suffix24_10">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_12.suffix24_10-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_14 suffix24_9">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_14.suffix24_9-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_15 suffix24_8">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_15.suffix24_8-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_16 suffix24_7">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_16.suffix24_7-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_17 suffix24_6">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_17.suffix24_6-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_18 suffix24_5">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_18.suffix24_5-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_19 suffix24_4">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_19.suffix24_4-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_20 suffix24_3">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_20.suffix24_3-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_21 suffix24_2">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_21.suffix24_2-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_22 suffix24_1">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_22.suffix24_1-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_1 prefix24_23">
		<p>30px</p>
	</div>
	<!--end .column2.c24_1.prefix24_23-->
	<div class="clear">&nbsp;</div>
	<div class="column2 c24_12">
		<div class="column2 c24_6 alpha">
			<p>230px</p>
		</div>
		<!--end .column2.c24_6.alpha-->
		<div class="column2 c24_6 omega">
			<p>230px</p>
		</div>
		<!--end .column2.c24_6.omega-->
		<div class="clear">&nbsp;</div>
		<div class="column2 c24_2 alpha">
			<p>70px</p>
		</div>
		<!--end .column2.c24_2.alpha-->
		<div class="column2 c24_10 omega">
			<p>390px</p>
		</div>
		<!--end .column2.c24_10.omega-->
	</div>
	<!--end .column.c16_8-->
	<div class="column2 c24_12">
		<div class="column2 c24_1 alpha">
			<p>30px</p>
		</div>
		<!--end .column2.c24_1.alpha-->
		<div class="column2 c24_11 omega">
			<p>430px</p>
		</div>
		<!--end .column2.c24_11.omega-->
		<div class="clear">&nbsp;</div>
		<div class="column2 c24_6 alpha">
			<p>230px</p>
		</div>
		<!--end .column2.c24_6.alpha-->
		<div class="column2 c24_6 omega">
			<p>230px</p>
		</div>
		<!--end .column2.c24_6.omega-->
	</div>
	<!--end .column.c16_8-->
	<div class="clear">&nbsp;</div>
</div>
<div style="margin:0 auto;width:940px; text-align:right;color:#999;">Based on<a href="http://960.gs" target="_blank">960 CSS System</a>, Created by <a href="http://www.isparkle.cn">mienflying</a>. Licensed under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPL</a> and <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">MIT</a>. </div>
</body>
</html>
